<!-- 局校通知一级路由 -->
<style scoped>
.bottom_header {
    background-color: #fff;
    height: 40px;
    z-index: 30;
    margin-left: -2px;
    display: flex;
    align-items: center;
}

.aside_left {
    width: auto;
    margin-top: 20px;
}

:deep(.el-sub-menu__title),
.el-menu-item {
    font-size: 12px;
    height: 30px;
}

:deep(.el-col-12) {
    max-width: none;
}

::-webkit-scrollbar {
    display: none;

}
</style >
<style scoped lang="scss">
.vote_main {
    font-size: 12px;

    header {
        width: 98%;
        margin: auto;
        background-color: #fff;
        height: 100px;
        display: flex;
        align-items: center;
        justify-content: space-around;
        margin-bottom: 20px;

    }

    .vote_couent {
        width: 98%;
        background-color: #fff;
        margin: auto;
    }
}
</style>
<template>
    <div class="common-layout">
        <el-container>
            <!-- 侧边栏 -->
            <el-aside style="width: auto;">
                <div class="aside_left">
                    <el-col :span="12">
                        <el-menu default-active="1" class="el-menu-vertical-demo" :default-openeds="arr" :collapse="isnull">
                            <el-menu-item index="1">
                                <template #title>
                                    <el-icon>
                                        <Bell />
                                    </el-icon>
                                    <span>局校通知</span>
                                </template>
                            </el-menu-item>
                        </el-menu>
                    </el-col>
                </div>
            </el-aside>
            <el-container>
                <el-header class="bottom_header">
                </el-header>
                <el-main style="background-color: #f7f7f7;">
                    <div class="vote_main">
                        <header>
                            <div class="demo-date-picker">
                                <div class="block">
                                    <span class="demonstration">发布日期:</span>
                                    <el-date-picker v-model="day" type="month" />
                                </div>
                            </div>
                            <!-- <p> 类型： <el-select v-model="select1" class="m-2" placeholder="请选择" style="height: 30px;">
                                                                <el-option label="停课通知" value="停课通知" />
                                                                <el-option label="活动通知" value="活动通知" />
                                                            </el-select>
                                                        </p> -->
                            <p>
                                发布范围：
                                <el-select v-model="select2" class="m-2" placeholder="请选择" style="height: 30px;">
                                    <el-option label="教务处" :value="101" />
                                    <el-option label="教学部" :value="102" />
                                    <el-option label="后勤部" :value="104" />
                                </el-select>
                            </p>

                            <p> 快速搜索：&nbsp;<el-input v-model="searchs" class="w-50 m-2" size="small"
                                    style="width: 130px; height: 30px;" placeholder="请输入发布详情" /></p>
                            <p>
                                <el-button type="primary" size="small"
                                    @click="selects(day, select1, select2, searchs)">查询</el-button>
                                <el-button size="small">重置</el-button>
                            </p>
                        </header>
                        <div class="vote_couent">
                            <div class="couent_butn">
                                <el-button type="primary" size="small"
                                    style="float: right; margin-right: 30px; margin-top: 20px;" @click="push">
                                    <el-icon>
                                        <DocumentAdd />
                                    </el-icon>发布通知
                                </el-button>
                            </div>
                            <el-table :data="tableData" style="width: 100% margin:30px 0; ">
                                <el-table-column prop="index" label="序号" width="60">
                                    <template #default="scope">
                                        {{ scope.$index + 1 }}
                                    </template>
                                </el-table-column>
                                <el-table-column prop="title" label="标题" width="180"></el-table-column>
                                <el-table-column prop="scope" label="发布范围">
                                    <template #default="scope">
                                        {{ scope.row.typeId == 102 ? "教学部" : scope.row.typeId == 104 ? "后勤部" : "教务处" }}
                                    </template>
                                </el-table-column>
                                <el-table-column prop="obj" label="通知类型">
                                    <template #default="scope">
                                        {{ scope.row.informType.name == "停课通知" ? "停课通知" : "活动通知" }}
                                    </template>
                                </el-table-column>
                                <el-table-column prop="time" label="发布时间"></el-table-column>
                                <el-table-column prop="id" label="操作">
                                    <template #default="scope">
                                        <span @click="deletes(scope.row)" style="color: red;">
                                            删除
                                        </span>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                        <div class="demo-pagination-block" style="float: right;">
                            <el-pagination :total="tableData" v-model:page-size="pageSize4"
                                :page-sizes="[100, 200, 300, 400]" :small="small" :disabled="disabled"
                                :background="background" layout="prev, pager, next, total, jumper, sizes" next-text="下一页"
                                prev-text="上一页" v-model:current-page="currentPage4" @size-change="handleSizeChange"
                                @current-change="handleCurrentChange" />
                        </div>
                    </div>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script setup lang="ts">
import server from '@/api';
import { ElNotification } from 'element-plus';
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
var isnull = ref(false)
var router = useRouter()
const form = ref({})
const day = ref('')
var searchs = ref()
var select1 = ref()
var select2 = ref()
var tableData = ref([])
const currentPage4 = ref(4)
const pageSize4 = ref(10)
const small = ref(false)
const background = ref(false)
const disabled = ref(false)
var arr = ref(["1"])
const handleSizeChange = (val: number) => {
    // console.log(`${val} items per page`)
}
const change = () => {
    isnull.value = !isnull.value
    // console.log(isnull.value);

}
const handleCurrentChange = (val: number) => {
    // console.log(`current page: ${val}`)
}
//当按钮被点击的时候进行发布通知的页面跳转
const push = () => {
    router.push('/massagebureau')
}
onMounted(async () => {
    var res = await server.BureauSchool.getAllInformByPage()
    // console.log(res.data.data.date);
    tableData.value = res.data.data.date

})
const deletes = async (row: any) => {
    var res = await server.BureauSchool.deleteAllInform(row.id)
    if (res.data.code == 200) {
        ElNotification.success({ message: '删除成功' })
        var i = tableData.value.findIndex((item: any) => item.id == row.id)
        tableData.value.splice(i, 1)
    }
}
const selects = async (day1: any, s1: any, s2: any, s: any) => {
    if (day1 && !s1 && !s2 && !s) {
        var month = day1.getMonth() + 1
        var year = day1.getFullYear()
        // console.log(month);
        day1 = `${year}-0${month}`
        // console.log(day1);
        var res = await server.BureauSchool.getAllInformByPage()
        tableData.value = res.data.data.date
        tableData.value = tableData.value.filter((item: any) => item.time.includes(day1))
    } else if (s1 && !day1 && !s2 && s) {
        // console.log(s2);
        var res = await server.BureauSchool.getAllInformByPage()
        tableData.value = res.data.data.date
        tableData.value = tableData.value.filter((item: any) => item.informType.name == s1)
    } else if (s2 && !day1 && !s1 && s) {
        var res = await server.BureauSchool.getAllInformByPage()
        tableData.value = res.data.data.date
        tableData.value = tableData.value.filter((item: any) => item.informType.id == s2)
    } else {
        var res = await server.BureauSchool.getAllInformByPage()
        tableData.value = res.data.data.date
        tableData.value = tableData.value.filter((item: any) => item.title.includes(s))
    }
}
</script>